<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>Usage - jstree</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/prettify.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad();prettyPrint();"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.5 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CSection"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="Usage"></a>Usage</h1><div class=CBody><p><b>Introduction</b></p><ul><li>jsTree is a <b>javascript based, cross browser tree component</b>.&nbsp; It is packaged as a <a href="http://jquery.com" class=LURL target=_top>jQuery</a> plugin.</li><li>jsTree <b>is absolutely free</b></li><li>jsTree is a <a href="http://vakata.com" class=LURL target=_top>one man</a> project and relies on <a href="http://groups.google.com/group/jstree" class=LURL target=_top>its great community</a> for <a href="http://code.google.com/p/jstree/issues/list" class=LURL target=_top>feature requests &amp; bug reports</a>.&nbsp; Join in!</li><li>jsTree passes <a href="http://jslint.com" class=LURL target=_top>jslint validation</a>, minifies nicely and does not modify the global scope in any way.</li><li>jsTree uses plugins so feel free to remove any plugins you do not use (or use the <a href="http://jstree.com" class=LURL target=_top>download builder</a>) or create your own plugins.</li></ul><p><b>Features at a glance</b></p><ul><li>Various data sources - HTML, JSON, XML</li><li>Supports AJAX loading</li><li>Drag &amp; drop support</li><li>Highly configurable</li><li>Theme support + included themes</li><li>Uses jQuery&rsquo;s event system</li><li>Optional keyboard navigation</li><li>Maintain the same tree in many languages</li><li>Inline editing</li><li>Open/close optional animation</li><li>Define node types and fine tune them</li><li>Configurable multitree drag &amp; drop</li><li>Optional checkbox tree support</li><li>Search function</li><li>Supports plugins</li><li>Optional state saving using cookies</li><li>RTL support</li><li>Optional sorting / unique management</li></ul><p><b>Including the files</b></p><p>First of all, as jsTree is a jQuery component, you need to include jQuery itself. jsTree v.1.0 requires jQuery version 1.4.4 :</p><blockquote><pre class="prettyprint">&lt;script type=&quot;text/javascript&quot; src=&quot;_lib/jquery.js&quot;&gt;&lt;/script&gt;</pre></blockquote><p>Then you need to include jstree itself :</p><blockquote><pre class="prettyprint">&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.jstree.js&quot;&gt;&lt;/script&gt;</pre></blockquote><p>You may change the path to whatever you like, but it is recommended not to rename <u>jquery.tree.js</u> (or <u>jquery.tree.min.js</u>) as the filename may be used for path autodetection (for example in the <a href="jstree-themes-js.html#jstree.themes.js" class=LFile id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">jstree.themes.js</a> plugin, however all official plugins will provide an alternative way of specifying any needed path manually).</p><p>Additionally some plugins have dependencies.&nbsp; If a plugin detects that a dependency is missing, it will throw an error.</p><p><b>Creating and configuring an instance</b></p><p>You can create a tree in the following manner (<a href="jstree-core-js.html#$().jstree" class=LGroup id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">$().jstree</a>) :</p><blockquote><pre class="prettyprint">jQuery(&quot;some-selector-to-container-node-here&quot;).jstree([ config_object ]);</pre></blockquote><p>In the optional config object you specify all the options that you want to set.&nbsp; Each plugin will describe its configuration and defaults.&nbsp; Each plugin&rsquo;s options (even the core) are set in their own subobject, which is named after the plugin.&nbsp; For example all of the core&rsquo;s options are set in the <u>core</u> key of the config object.</p><blockquote><pre class="prettyprint">jQuery(&quot;some-selector-to-container-node-here&quot;)
   .jstree({
       core : {
           /* core options go here */
       }
   });</pre></blockquote><p><b>Please note that if your options for a given plugin are the same as the defaults you may omit those options or omit the subobject completely (if you do not need to modify the defaults).</b></p><p>The special <u>plugins</u> config option is not part of any plugin, it defines a list of active plugins for the instance being created.&nbsp; Although many plugins may be included, only the ones listed in this option will be active.</p><blockquote><pre class="prettyprint">jQuery(&quot;some-selector-to-container-node-here&quot;)
   .jstree({
       core : { /* core options go here */ },
       plugins : [ &quot;themes&quot;, &quot;html_data&quot;, &quot;some-other-plugin&quot; ]
   });</pre></blockquote><p><b>Interacting with the tree</b></p><p>To perform an operation programatically on a given instance you can use two methods (<a href="jstree-core-js.html#$().jstree" class=LGroup id=link3 onMouseOver="ShowTip(event, 'tt2', 'link3')" onMouseOut="HideTip('tt2')">$().jstree</a>, <a href="jstree-core-js.html#$.jstree._reference" class=LFunction id=link4 onMouseOver="ShowTip(event, 'tt3', 'link4')" onMouseOut="HideTip('tt3')">$.jstree._reference</a>).</p><blockquote><pre class="prettyprint">/* METHOD ONE */
jQuery(&quot;some-selector-to-container-node-here&quot;)
   .jstree(&quot;operation_name&quot; [, argument_1, argument_2, ...]);

/* METHOD TWO */
jQuery.jstree._reference(needle)
   .operation_name([ argument_1, argument_2, ...]);</pre></blockquote><p>jsTree uses events to notify of any changes happening in the tree.&nbsp; All events fire on the tree container in the <u>jstree</u> namespace and are named after the function that triggered them.&nbsp; Personally I believe it is best to bind to the events and then create the instance.</p><blockquote><pre class="prettyprint">jQuery(&quot;some-container&quot;)
   .bind(&quot;loaded.jstree&quot;, function (event, data) {
       alert(&quot;TREE IS LOADED&quot;);
   })
   .jstree({ /* configuration here */ });</pre></blockquote><p>Please note the second parameter data.&nbsp; Read the documentation on each event to see what it contains.</p></div></div></div>

</div><!--Content-->


<div id=Footer>Copyright &copy; 2010 Ivan Bozhanov&nbsp; &middot;&nbsp; Updated March 20th, 2011&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MTitle>jstree<div class=MSubTitle>jquery treeview plugin</div></div><div class=MEntry><div class=MFile id=MSelected>USAGE</div></div><div class=MEntry><div class=MFile><a href="_license-txt.html">LICENSE</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Core</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="jstree-core-js.html">jstree.<wbr>core.js</a></div></div><div class=MEntry><div class=MFile><a href="vakata-js.html">Helper functions</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Plugins</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="jstree-themes-js.html">jstree.<wbr>themes.js</a></div></div><div class=MEntry><div class=MFile><a href="jstree-ui-js.html">jstree.<wbr>ui.js</a></div></div></div></div></div><div class=MEntry><div class=MFile><a href="_lib/jquery-js.html">_lib\<wbr>jquery.js</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Index</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Events.html">Events</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Variables.html">Variables</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Classes.html">Classes</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Events">Events</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Variables">Variables</option></select></div></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CFile>Controls the looks of jstree, without this plugin you will get a functional tree, but it will look just like an ordinary UL list</div></div><div class=CToolTip id="tt2"><div class=CGroup>The actual plugin wrapper, use this to create instances or execute functions on created instances.</div></div><div class=CToolTip id="tt3"><div class=CFunction>Returns an instance</div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>